<template>
<div>
<div class="table">
        <div class="divSearch">
			<Row>
				<!--<Col :lg="{span:4}" :md="{span:8}" :sm="{span:16}" :xs="{span:22}">
					<label class="searchItem">动作名称:</label>
					<Input type="text"  v-model="searchModel.ActionName" placeholder="请输入..." class="searchInput"></Input>			
				</Col>  -->    
				<Col :lg="{span:5}" :md="{span:10}" :sm="{span:12}" :xs="{span:13}">
					<label class="searchLabel">操作地址:</label>				
					<Input type="text"  v-model="searchModel.ActionCode" placeholder="请输入..." class="searchInput"></Input>								
				</Col>
				<Col :lg="{span:5}" :md="{span:10}" :sm="{span:12}" :xs="{span:13}">
					<label class="searchLabel">操作人员:</label>
					<Input type="text" v-model="searchModel.Account" placeholder="请输入..." class="searchInput"></Input>			
				</Col>    
				<Col :lg="{span:5}" :md="{span:10}" :sm="{span:12}" :xs="{span:13}">
					<label class="searchLabel">日志时间:</label>
					<Date-picker type="date" v-model="searchModel.LogsTime" placeholder="请选择..." class="searchInput"></Date-picker>								
				</Col> 
				<!--<Col :lg="{span:5}" :md="{span:8}" :sm="{span:16}" :xs="{span:22}">
					<label class="searchItem">IP地址:</label>
					<Input type="text" v-model="searchModel.IpAddress" placeholder="请输入..." class="searchInput"></Input>			
				</Col> -->
                <Col :lg="{span:2}" :md="{span:2}" :sm="{span:2}" :xs="{span:2}">
					<Button icon="ios-search" type="primary" @click="Search()" style="margin-top:5px;">查询</Button>
				</Col>    
			</Row>
		</div>
		<Row>
            <Col span="24" class="col-margin">
			<Table size="large" :height="clientHeight" border :context="ctx" :columns="columnsList" :data="datas.rows" no-data-text='暂无数据...'></Table>
            </Col>
        </Row>
	    <Row><!--分页插件-->	   
			    <Col>
					 <!-- <spin size="large"></spin> -->
			    	 <!--<Page :total="datas.total" show-elevator show-sizer show-total placement="top"  @on-change="changePage" @on-page-size-change="changePageSize">
			    	 </Page>-->
					 <Page class="pageComponent" :total="datas.total" placement="top" @on-change="getPageNumber" :page-size="searchModel.PageSize" :page-size-opts='pageSizeOpts' show-sizer @on-page-size-change="getPageSize" show-total show-elevator></Page>
			    </Col>
	    </Row>
    </div>
</div>
</template>
<script>
export default {
	data(){
		return {
			self:this,
	        loading:false,//加载动画开关
			clientHeight: window.innerHeight - 300,//表格默认高度
			//查询模型：根据需求删除不不要查询条件
            searchModel: {
                Id:'', 
                ActionName:'', 
                ActionCode:'', 
                Account:'', 
                LogsTime:'', 
                IpAddress:'', 
                PageNumber: 1, PageSize: 20
            },
			pageSizeOpts: [20, 40, 50],//默认分页最大设置
			datas: {},//table数据对象
	        spinShow:true,//加载动画开关
	        showCollapse:1,//显示的手风琴项
			ctx: this,//table数据上下文
			columnsList: [//表头对象
                { title: "系统操作", key: "ActionName"},
                { title: "操作地址", key: "ActionCode" },
                { title: "操作人", key: "Account" },
                { title: "日志时间", key: "LogsTimeString" },
                { title: "IP地址", key: "IpAddress" },
                { title: "操作", key: "Id", width: 200, align: 'center', render:(h,params)=> {
					return h('div', [
										h('Button', {class:{ideleteColor:true}, props: {type:'ghost',size:'small',icon:'ios-trash-outline'},on: {click: () => {this.delInfo(params.row.Id); }}}, '删除')])
                    }
                }
			]
		}
	},
	mounted(){
		const that = this;
		window.onresize = () => {//动态设置数据表的高度
			return (() => {
				that.clientHeight = window.innerHeight-300;
			})()
		};
    },
	methods:{
		//删除对象
        delInfo(id) {
            var self = this;
            self.$Modal.confirm({
                title: '提示信息',
                content: '<p>数据删除后不可恢复，确定要删除？</p>',
                onOk: () => {
                    this.$http.delete("Logs", { params: { id: id } }).then(
                        function (res) {
                            if (res.data.status == 1) {
                                self.$Notice.success({ title: '删除成功！', desc: false });
                                self.initTableData();
                            }
                            else {
                                self.$Modal.error({ title: "提示信息", content: "数据删除失败!!!" });
                            }
                        }
                    );
                }
            });
        },
        //查询方法
		Search() {
			this.initTableData();
		},
		initTableData(){//初始化数据
			var self = this;
			self.$http.post('Logs/PostPageList', this.searchModel).then(function (res) {
				if (res.data.status === 1) {
					self.datas = res.data;
				}
				else {
					self.$Modal.error({ title: '提示信息', content: res.data.message });
				}
			});
		},
		//获取当前页码
        getPageNumber(pageIndex) {
            this.searchModel.PageNumber = pageIndex;
            this.initTableData();
        },
        //获取当前分页大小
        getPageSize(pageSize) {
            this.searchModel.PageSize = pageSize;
            this.initTableData();
        },
    },
	created:function(){ //初始化函数
		this.initTableData();
	}
}
</script>